@charset "utf-8";
.chat-box {
  display: flex;
  flex-direction: column;

  position: relative;
  width: 100%;
  height: 100%;
  background: #ecedf1;

  i.chat-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 26px;
    cursor: pointer;
  }

  /* 群聊名称 */
  .chat-title {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    h3 {
      margin: 0;
      font-weight: bold;
    }
  }

  /* 群组内容 */
  .group {
    flex: 1;
    display: flex;

    .group-message {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      /* 聊天记录 */
      .message-box {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;

        .message-container {
          padding: 0 15px;
          overflow-y: auto;

          .name-p {
            padding-left: 10px;
            margin-bottom: 0;
          }
          .text-p {
            padding: 4px;
            max-width: 50%;
            background: #fff;
            border-radius: 5px;
            font-weight: normal;
            word-wrap: break-word;
            text-align: left;
          }
        }
      }
      /* 富文本框 */
      .send-box {
        border-top: 1px solid #ccc;
        padding: 10px 0 36px;
        .w-e-toolbar {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 25px;
          line-height: 25px;
          background: #ecedf1 !important;
          border: none !important;
          z-index: 11;
        }

        .w-e-text-container {
          border-top: 1px solid #ccc !important;
          height: auto !important;
          margin: 0 10px;
          min-height: 40px !important;
          border-radius: 10px;
          position: relative !important;
          bottom: 3px;
          background: #fff;
          left: 0;
          z-index: 2010 !important;

          .w-e-text {
            overflow-y: auto;

            p {
              line-height: 1.2;
            }
            img {
              max-height: 200px;
              max-width: 100%;
            }
          }

          /* 表情 */
          .w-e-panel-container {
            top: auto;
            bottom: 0;
          }
        }
      }
      /* 发送按钮 */
      .oper-div {
        display: inline-block;
        position: absolute;
        z-index: 11;
        bottom: 5px;
        right: 17px;

        button.send-btn {
          background: #fff;
          border: 1px solid #0072b9;
          color: #0072b9;
          border-radius: 5px;
          padding: 2px 10px;
          z-index: 10;
          outline: none;
          line-height: 1.6;
        }
      }
    }

    /* 群成员 */
    .group-members {
      width: 200px;
      border-left: 1px solid #ccc;
      overflow-x: hidden;
      overflow-y: auto;
      ul {
        margin: 10px;
        li {
          border-bottom: 1px solid #ccc;
          .big-p {
            font-size: 14px;
            padding: 5px;
            margin-bottom: 0;
            padding-bottom: 0;
            color: #333;
            font-weight: bold;
          }
          .small-p {
            font-size: 12px;
            padding: 5px;
            margin-bottom: 0;
            color: #666;
          }
          .big-p, .small-p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}